<template>
  <view class="comment_cnt  l_f_c">
    <view class="comment_title nvueW text_b_28 l_f_r_sb_c">
      <text>共{{ commentTotal }}条评论</text>
      <view class="l_f_r_c_c right_text">
        <view :class="{
          active:queryData.sort==1
        }" @click="setActiveName(1)">
          <text class=" text_5_28">默认</text>
        </view>
        <text class="x_">|</text>
        <view :class="{
        active:queryData.sort==0
        }" @click="setActiveName(0)">
          <text class=" text_5_28">最新</text>
        </view>
      </view>
    </view>
    <scroll-view :scroll-y="true" class="flex_1 scroll">


      <CComment
          ref="ccRef"
          v-model:myInfo="userData"
          v-model:tableData="tableData"
          v-model:tableTotal="commentTotal"
          v-model:userInfo="userData"
          :deleteMode="deleteMode"
          :fTotal="tableTotal"
          class="nvueW"
          @deleteFun="deleteFun"
          @getMoreReply="getMoreReply"
          @handleAddPage="handleAddPage"
          @likeFun="likeFun"
          @replyFun="replyFun"
      ></CComment>
      <view style="width: 100%;height: 130rpx"></view>
    </scroll-view>

    <view class="btn l_f_r_c_c ">
      <view class="input_b l_f_r l_al_c flex_1" @tap="openComment">
        <text class="text_4_28">发表新评论</text>
      </view>
      <view v-if="dzNum != -99" class="right l_f_r_c_c" @click="handleHeart">
        <text class="text_5_30">{{ dzNum }}</text>

        <uni-icons v-if="isHeart" color="#f67800" size="20" type="heart-filled"></uni-icons>
        <uni-icons v-else color="#f67800" size="20" type="heart"></uni-icons>
      </view>

    </view>

  </view>

</template>

<script setup>
import CComment from "@/components/cc-comment/cc-comment.vue";
// import {userInfo} from "@/utils/user";
// import {request} from '@/utils/minFns'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['heart'])
const handleHeart = () => {
  emit('heart')
}



const userData = ref({
  user_id: uni.getStorageSync('userInfo').ID,
  user_name:uni.getStorageSync('userInfo').nickname,
  user_avatar: uni.getStorageSync('userInfo').head || "https://pili-vod.guanxikeji.com/fubao/img/1755758365748.png",
})
const setActiveName = (name) => {
  queryData.value.sort = name
  queryData.value.page = 1
  getList()
}
const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  total: {
    type: Number,
    default: 0
  },
  requestUrl: {
    type: String,
    default: 'api/articleComment/'
  },
  dzNum: {
    type: Number,
    default: -99
  },
  isHeart: {
    type: Boolean,
    default: false
  }

})
const commentTotal = ref(props.total)
//#ifndef APP-PLUS-NVUE
onMounted(() => {
  getList()
})
// #endif
//#ifdef APP-PLUS-NVUE
setTimeout(() => {
  getList()
}, 200)
// #endif

watch(() => props.total, (nV) => {
  commentTotal.value = nV
})
watch(() => props.id, (nV) => {
  console.log(props.id)
  getList()
})


const queryData = ref({
  page: 1,
  size: 50,
  sort: 1

})
const handleAddPage = (callback) => {
  if (queryData.value.page * queryData.value.size >= tableTotal.value && tableTotal.value != 0) {
    callback([])
    return
  }
  queryData.value.page++;

  getList(callback)

}
// 获取评论列表
const getList = (callback = null) => {
  tableData.value = []
  proxy.$request({
    url: props.requestUrl + `?id=${props.id}&page=${queryData.value.page}&size=${queryData.value.size}&sort=${queryData.value.sort}`,
    method: 'get',
    success: res => {
      if (res.errno == 0) {
        if (res.data) {
          if (callback) {
            callback(res.data.commentList)
          } else {
            tableData.value = res.data.commentList

          }
          tableTotal.value = res.data.total;
        } else {
          callback && callback([])
        }
      }

    }
  })
}
const getMoreReply = (params, callback) => {
  console.log("getMoreReply", params);

  proxy.$request({
    url: props.requestUrl + `?id=${props.id}&page=${params.page}&size=${params.size}&parent_id=${params.id}`,
    method: 'get',
    success: res => {
      if (res.errno == 0) {
        if (res.data) {
          callback(res.data.commentList || [])
        } else {
          callback([])
        }
      }


    }
  })
}


// 唤起新评论弹框
let ccRef = ref(null);

function openComment() {
  ccRef.value.newCommentFun();
}

// 点赞回调事件
function likeFun({params}, callback) {
  console.log("likeFun", params);
  // 当请求失败, 调用callback重置点赞效果;
  proxy.$request({
    url: props.requestUrl + ``,
    method: 'put',
    data: {
      id: +params.id,
    },
    success: res => {
      if (res.errno !== 0) {
        console.log(res)
        // const res = {id: Math.random()}; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
        callback(res)

      }
      // uni.showToast({
      //   title: res.errmsg,
      //   icon: 'none',
      // })
      uni.hideLoading()
    }
  })
}

// 评论回调事件
function replyFun({params}, callback) {
  // 当请求成功, 调用callback执行评论插入;
  console.log({
    id: +props.id,
    granddad_id: params.granddad_id,
    pId: params.reply_id,
    content: params.user_content
  })
  proxy.$request({
    url: props.requestUrl + ``,
    method: 'POST',
    data: {
      id: +props.id,
      granddad_id: params.granddad_id,
      pId: params.reply_id,
      content: params.user_content
    },
    success: res => {
      if (res.errno == 0) {
        callback(res)

      }
      uni.showToast({
        title: res.errmsg,
        icon: 'none',
      })
      uni.hideLoading()
    }
  })

}

/** 删除回调事件
 * mode 删除模式
 * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
 * -- all : 删除所有评论包括回复评论
 */
const deleteMode = ref("all");

function deleteFun(params, callback) {
  proxy.$request({
    url: props.requestUrl + ``,
    method: 'DELETE',
    data: {
      id: +params.id,
    },
    success: res => {
      callback(res)
      uni.showToast({
        title: res.errmsg,
        icon: 'none'
      })
    },
    fail: res => {
      callback(res)
    }
  })

}

// ----模拟数据------模拟数据------模拟数据----
// 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
let myInfo = ref({
  user_id: 1, // 用户id
  user_name: "cc", // 用户名
  user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
});

let tableTotal = ref(0); // 评论总数
let tableData = ref([
  // {
  //   id: 120, // 评论id
  //   parent_id: null, // 评论父级的id
  //   reply_id: null, // 被回复评论的id
  //   reply_name: null, // 被回复人名称
  //   user_id: 2, // 用户id
  //   user_name: "ikun", // 用户名
  //   user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
  //   user_content: "唱,跳,rap,篮球", // 用户评论内容
  //   is_like: false, // 用户是否点赞
  //   like_count: 120, // 点赞数统计
  //   create_time: "2025-02-19 09:16", // 创建时间
  // },

  // },
]); // 评论表
</script>

<style lang="scss" scoped>
.comment_cnt {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .scroll {
    overflow: hidden;
  }

}

.btn {

  position: fixed;
  bottom: 0rpx;
  left: 0;
  width: 750rpx;
  height: 130rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 0 28rpx;

  .input_b {
    height: 64rpx;
    background: #F3F3F3;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0 20rpx;

    .text_4_28 {
      color: #999999;
    }

  }

  .right {
    margin-left: 20rpx;

    .text_5_30 {
      margin-left: 10rpx;
    }
  }
}

.comment_title {
  width: 100%;
  border-bottom: 1px solid #eff2f3;
  padding: 40rpx 0 20rpx 0;

  .right_text {
    .x_ {
      margin: 0 10rpx;
      font-size: 24rpx;
      color: #BFBFBF;
    }

    .text_5_28 {
      color: #555
    }

    .active {
      .text_5_28 {
        color: #F67800;
      }
    }

  }
}


//#ifdef APP-PLUS-NVUE

.nvueW {
  width: 710rpx;
}

//#endif

</style>
